<template>
  <view class="content">
    <view v-for="(item, index) in ticket" :key="index" class="item">

      <view class="text1">
        <view>订单状态:</view>
        <view>{{ item.orderStatus }}</view>
      </view>

      <view class="text1">
        <view>座位列表:</view>
        <view>
          <view v-for="(seat, index) in item.seats" :key="index" class="seat">
            {{ seat }}
          </view>
        </view>
      </view>

      <view class="text1">电子票据: </view>
      <image class="ticketImg"
             :src="item.ticket"
             mode="aspectFit"
             show-menu-by-longpress
             @error="errorImg"
             v-if="isFindEmpty(item.ticket)"
             @tap="dblclick(item.ticket)" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ticket: [],
      touchStartTime: 0, // 触摸开始时间   用来判断是否是双击
    };
  },
  components: {},
  onLoad(option) {
    const { studentName = "", phone = "" } = option;
    uni.request({
      url: "/roland-api/home/ticket",
      data: {
        studentName: this.utf8_to_b64(studentName),
        phone,
      },
      method: "POST",
      dataType: "json",
      header: {
        Accept: "application/json",
        "Content-Type": "application/json; charset=utf-8",
      },
      success: (res) => {
        const data = res.data;
        if (data.code !== 0) {
          uni.showToast({
            title: data?.msg ?? "查询失败",
            icon: "none",
          });
          setTimeout(() => {
            uni.showLoading({
              title: "即将为您跳转购票/查询票据页面",
            });
          }, 1000);
          setTimeout(() => {
            uni.hideLoading();
            uni.navigateTo({
              url: `/`, //跳转地址
            });
          }, 2000);
        } else {
          this.ticket = data.data;
          if (!this.ticket || !this.ticket.length) {
            uni.showToast({
              title: "抱歉，未查询到您购买门票!",
              icon: "none",
            });
            setTimeout(() => {
              uni.showLoading({
                title: "即将为您跳转购票/查询票据页面",
              });
            }, 1000);
            setTimeout(() => {
              uni.hideLoading();
              uni.navigateTo({
                url: `/`, //跳转地址
              });
            }, 2000);
          }
        }
      },
    });
  },
  methods: {
    /**
     * utf8_to_b64 编码
     * @param str 编码 内容
     * @returns string base64 格式内容 例：'5Lit5paH'
     */
    utf8_to_b64(str) {
      return window.btoa(unescape(encodeURIComponent(str)));
    },
    /**
     * utf8_to_b64 解码
     * @param str 解码 base64 格式内容
     * @returns string 内容 例：'中文'
     */
    b64_to_utf8(str) {
      return decodeURIComponent(escape(window.atob(str)));
    },
    errorImg() {},
    isFindEmpty(item) {
      const lastLength = item.lastIndexOf("/");
      const imgName = item.substring(lastLength + 1);
      return item && imgName !== "null" && imgName !== null;
    },
    dblclick: function (url) {
      if (this.touchStartTime == 0) {
        this.touchStartTime = new Date().getTime();
      } else {
        if (new Date().getTime() - this.touchStartTime <= 300) {
          // this.setMeau = true;
          // console.log("这是双击");
          this.preViewImg(url);
        }
        this.touchStartTime = 0;
      }
    },
    preViewImg(url) {
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log('data', data);
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  //width: 100%;
  min-height: 100%;
  padding: 0 12px;
  padding-bottom:40px;
  padding-top:20px;
  background:#ECECEC;

  .item {
    //width: 100%;
    background:#fff;
    margin-bottom:20px;
    border-radius:4px;
    padding:14px 14px;

    .text1{
      display: flex;
      justify-content: space-between;
      margin-bottom:10px;
    }


    .seat{
      color:#E03D0F;
      margin-bottom:10px;
      line-height:1;
      font-size:12px;
    }

    .ticketImg{
      border-radius:4px;
      width: 100%;
      background-color: #ccc;
    }
  }
}
</style>
